<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.css" type="text/css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        margin: 0px;
        background-color: #eeeeee;
        font-size: 16px;
        font-family: "Microsoft YaHei","YouYuan", "SongTi",Verdana;
    }
    @media(min-width: 1000px) {
        .container{
            max-width: 1684px;
        }
    }
    .header {
        border-top: solid 3px black;
        border-radius: 0px;
    }
    div{
        border-radius: 5px;
    }
    label{
        font-weight: bold;
    }
    a:link,a:visited{
        text-decoration: none;
        color: #337ab7;
    }
    a:hover,a:active {
        text-decoration: none;
        color: #e56244;
    }
    .menu {
        width:100%;
        margin-bottom: 10px;
        border-top: solid 2px orangered;
        background-color: #563d7c;
    }
    .menu .menu-bar a:link {
        color: whitesmoke;
    }
    .footer {
        background-color: #333333;
        margin-top: 20px;
        margin-bottom: 0px;
        padding: 0px;
        border-radius: 0px;
        color: white;
    }
    .footer .left {
        font-size: 16px;
        margin: 20px 0px;
    }
    .footer .center {
        font-size: 16px;
        margin: 20px 0px;
        text-align: center;
    }
    .footer .right {
        font-size: 16px;
        margin: 20px 0px;
        text-align: right;
    }
    .navbar-nav a {
        width: 130px;
        height: 40px;
    }
</style>
<body>
<div class="header">
    <div class="container" style="padding:0px 10px 0px 0px;">
        <div class="row" style="display: flex;margin-left: 50px">
            <div class="col-sm-4" style="margin: 10px 0px;">
                <a href="/">
                    <img src="/image/logo.png" style="width: 230px;padding: 23px">
                </a>
            </div>
            <!-- 仅在sm及以上设备中显示 -->
            <div class="col-sm-8 col-8 d-none d-sm-block"
                 style="text-align:right;padding-top: 40px;">
                <h2 style="color: midnightblue">以蜗牛之名，行学习之实</h2>
            </div>
        </div>
    </div>
</div>
<!-- 设置一个最外层DIV，保持100%的宽度 -->
<div class="menu">
    <div class="container" style="padding: 0px;">
        <!--基于Bootstrap定制分类导航区域，可以参考bootcss.com中文网站的教程 -->
        <nav class="navbar navbar-expand-lg navbar-dark menu-bar"
             style="background-color: #563d7c;height: 50px;margin-left: 50px;display: flex;padding: 20px;font-size: 20px">
            <a class="navbar-brand" href="#" style="padding: 10px">快捷导航</a>

            <!-- 配置导航菜单项列表 -->
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="margin-left: 10px;padding: 10px">
                    <div class="navbar-nav"style="float: left">
                        <a class="nav-item nav-link" href="/type/1" style="margin-left: 10px">PHP开发</a>
                        <a class="nav-item nav-link" href="/type/2" style="margin-left: 10px">Java开发</a>
                        <a class="nav-item nav-link" href="/type/3" style="margin-left: 10px">Python开发</a>
                        <a class="nav-item nav-link" href="/type/4" style="margin-left: 10px">Web前端</a>
                        <a class="nav-item nav-link" href="/type/5" style="margin-left: 10px">测试开发</a>
                        <a class="nav-item nav-link" href="/type/6" style="margin-left: 10px">数据科学</a>
                        <a class="nav-item nav-link" href="/type/7" style="margin-left: 10px">网络安全</a>
                        <a class="nav-item nav-link" href="/type/8" style="margin-left: 10px">蜗牛杂谈</a>
                    </div>
                    <div class="navbar-nav ml-auto" id="loginmenu">

                        {% if session.get('islogin') =='true' %}
                            <a class="nav-item nav-link" href="/ucenter">欢迎你：{{session.get('nickname')}}</a>
                        {% if session.get('rolo') == 'admin' %}
                            <a class="nav-item nav-link" href="/admin">系统管理</a>
                        {% else %}
                            <a class="nav-item nav-link" href="/user_center">用户中心</a>
                        {% endif %}
                        <a class="nav-item nav-link" href="/logout">注销</a>
                        {% else %}
                        <a class="nav-item nav-link" href="/login" style="margin-left: 10px">登录</a>
                        <a class="nav-item nav-link" href="/register" style="margin-left: 10px">注册</a>
                        {% endif %}

                    </div>
                </div>
        </nav>
    </div>
    </div>
<div class="content">
    {% block content%}
    <p></p>
    {% endblock %}
</div>
<div class="container-fluid footer">
    <div class="container">
        <div class="row" style="display: flex;">
            <div class="col-4 left" style="width: 250px;margin-left: 50px;">
                <p>版权所有&copy;蜗牛笔记(V-1.0)</p>
                <p>备案号：蜀ICP备15014130号</p>
            </div>
            <div class="col-4 center" style="margin-left: 200px;">
                <p >友情链接</p>
                <p ><a href="http://www.woniuxy.com/"target="_blank">
                在线课堂</a>
                    <a href="http://www.woniuxy.com/live" target="_blank">
                        直播课堂</a>
                    <a href="http://www.woniuxy.com/train/index.html" target="_blank">
                        培训中心
                    </a>
                    <a href="http://www.aduobi.com" target="_blank">UI设计学院</a>
                </p>
            </div>
            <div class="col-4 right" style=" margin-right: 50px;">
                <p >联系我们</p>
                <p >成都*孵化园&nbsp;&nbsp;&nbsp;QQ/微信：15903523</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>